<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" :title="title"></uni-navbar></view>

		<view class="form-box">
			<view class="p-text">为便于您对问题办理情况和结果的关注，请填写您的手机号码进行验证</view>

			<u-form :model="form" ref="uForm">
				<u-form-item class="form-item border-none" required label="问题标题" prop="title">
					<!-- block -->
					<u-input v-model="form.title" type="text" placeholder="请输入" />
				</u-form-item>
				<u-form-item class="form-item" required label="提交人" prop="createName">
					<!-- block -->
					<u-input v-model="form.createName" type="text" placeholder="请输入" />
				</u-form-item>
				<u-form-item class="form-item border-none" required label="手机号" prop="phone">
					<!-- block -->
					<u-input v-model="form.phone" type="number" placeholder="请输入" />
				</u-form-item>
				<u-form-item class="form-item border-none" label="" v-if="phone != form.phone">
					<u-input inputAlign="left" v-model="form.smsCode" type="number" placeholder="请输入验证码"></u-input>
					<template v-slot:right>
						<view class="code" @click="getCode">{{ codeTips }}</view>
						<!-- <u-button class="code" type="error" size="mini" @click="getCode">{{ codeTips }}</u-button> -->
					</template>
					<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
					
				</u-form-item>
				<!-- <u-form-item class="form-item" label="代表">
					<view class="input-text">{{ userInfo.userInfo.userName }}</view>
				</u-form-item> -->
				<!-- <u-form-item class="form-item" label="联系网格">
					<view class="input-text">{{ userInfo.station.remark }}</view>
				</u-form-item> -->

				<u-form-item class="form-item border-none" required label="" labelPosition="top" prop="opinionDescribe">
					<u-input v-model="form.opinionDescribe" style="z-index: 1 !important;" inputAlign="left" type="textarea" placeholder="请输入您的问题（必填）" :clearable="false" :height="160" :maxlength="-1" />
				</u-form-item>

				<u-form-item class="form-item" labelPosition="top">
					<!-- block -->
					<uni-file-upload :type="['all', 'image', 'audio']" :limit="10"></uni-file-upload>
				</u-form-item>

				<u-form-item class="form-item border-none" required label="发生地点">
					<view class="input-text" @click="chooseLocation" v-if="form.address">{{ form.address }}</view>
					<view class="form-right" v-else>
						<u-input @click="chooseLocation" disabled type="text" placeholder="请点击定位" />
						<u-icon name="arrow-right" color="#979797"></u-icon>
					</view>
				</u-form-item>
				<u-form-item class="form-item" label="详细位置">
					<!-- block -->
					<u-input v-model="form.address2" type="text" placeholder="请输入" />
				</u-form-item>
			</u-form>
		</view>

		<view class="fiexd-btm"><u-button class="form-btn" type="error" @click="confirm">提交</u-button></view>

		<view class="popup-box" v-if="pShow">
			<view class="popup-flex">
				<scroll-view scroll-y="true" class="m-box">
					<view class="h2">提交须知</view>
					<view class="summon">
						<view class="p">一、选民群众可以通过留言，向代表反映社情民意，对经济社会发展中具有普遍性和共性的问题，提出建议或者意见。</view>
						<view class="p">二、选民群众应当围绕政治、经济、文化、社会和生态文明建设中的重大问题和选民群众普遍关心的问题，提出建议或意见。可以对自己直接或间接选举产生的人大代表的履职情况，提出意见。</view>
						<view class="p">
							三、下列情况不应当向人大代表反映：
							<view>（1）涉及申诉、控告、检举的；</view>
							<view>（2）属于学术探讨、产品推介的；</view>
							<view>（3）没有具体内容的；</view>
							<view>（4）违反有关法律法规的；</view>
							<view>（5）属于信访类的；</view>
							<view>（6）其他不适宜向人大代表提出的事项。</view>
						</view>
						<view class="p">四、选民群众向代表留言，应当留下联系方式，便于联系反馈。</view>
						<view class="p">五、人大代表收到选民群众留言后，应当按照有关法律法规的规定进行处理。</view>
					</view>
				</scroll-view>

				<view class="fiexd-btm">
					<view class="flex-box">
						<u-button class="form-btn" @click="back">取消</u-button>
						<u-button class="form-btn" v-if="!agree" type="error" disabled @click="agree = true">已阅读({{ count }}s)</u-button>
						<u-button class="form-btn" v-else type="error" @click="pShow = false">已阅读并同意</u-button>
					</view>
				</view>
			</view>
		</view>

		<view v-if="false && willClue"></view>
	</view>
</template>

<script>
import uniAudio from '@/components/uni-audio.vue';
import uniFileUpload from '@/components/uni-file-uploader.vue';
import dateTimePicker from '@/components/uni-datetime-picker';
import selectTree from '@/components/uni-select-tree.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniAudio,
		uniFileUpload,
		dateTimePicker,
		selectTree
	},
	data() {
		return {
			id: '',
			title: '问题提报',
			typeA: '',
			userName: '',
			phone: '',
			count: 3,
			ocrKey: '',
			disabled: false,
			isShow: true,
			pShow: true,
			agree: false,
			codeTips: '获取验证码',
			content: ``,

			timer: '',

			type: '',
			typeShow: false,
			typeList: [],

			llzIds: [],
			llzName: '',
			llzShow: false,
			llzList: [],
			llzStr: '',

			dbIds: [],
			dbName: '',
			dbShow: false,
			dbList: [],
			dbStr: '',

			dictType: '',
			form: {
				id: '',
				title: '',
				type: '',
				opinionType: '',
				createName: '',
				address: '',
				address2: '',
				phone: '',
				smsCode: '',
				stationId: '',
				remark: '',
				representiveId: '',
				sendTo: 2,
				clientCode: '',
				opinionDescribe: ''
			},
			rules: {
				title: [
					{
						required: true,
						message: '请输入标题',
						trigger: 'change'
					}
				],
				createName: [
					{
						required: true,
						message: '请输入提交人',
						trigger: 'change'
					}
				],
				address: [
					{
						required: true,
						message: '请点击定位',
						trigger: 'change'
					}
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change']
					}
				],
				smsCode: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'change'
					}
				],
				opinionDescribe: [
					{
						required: true,
						message: '请输入您的问题',
						trigger: 'change'
					}
				]
			},
			willClue: {
				adoptUser: '',
				clientCode: ''
			}
		};
	},
	onLoad(option) {
		this.loadLogin();
		if (option && option.id) {
			this.id = option.id;
		}
		
		//委员id
		if (option && option.representiveId) {
			this.form.representiveId = option.representiveId;
		}
		
		//委员名字
		if (option && option.userName) {
			this.form.userName = option.userName;
		}
		
		//联络站名字
		if (option && option.stationName) {
			this.form.stationName = option.stationName;
		}
		
		//联络站id
		if (option && option.stationId) {
			this.form.stationId = option.stationId;
		}

		// this.loadDict('mqzt_type', 'typeList');
		// this.loadSite();
		// this.loadTeam();

		uni.setNavigationBarTitle({
			title: this.title
		});

		this.countdown();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onUnload() {
		this.$store.commit('filePush', []);
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.userInfo) {
				this.clientCode = this.userInfo.clientCode;
				this.userId = this.userInfo.sysUser.userId;
				this.phone = uni.getStorageSync('phone');
				this.form.phone = this.phone;
				// this.form.stationId = this.userInfo.station.id;
				// this.form.remark = this.userInfo.station.remark;
			} else {
				// this.$logout();
			}
		},
		codeChange(text) {
			this.codeTips = text;
		},
		closeAudio2() {
			this.isShow = false;
		},
		closeAudio(data, num) {
			console.log(data, num);
			// this.uploadAPI(URL.createObjectURL(data), 'audio',num)
			// this.isShow = false;
		},
		getCode() {
			let data = {};
			if (this.$refs.uCode.canGetCode) {
				this.$request('/sms/code?tel=' + this.form.phone, data, {
					load: true
				}).then((res) => {
					this.$msg('验证码已发送');
					this.$refs.uCode.start();
				});
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		countdown(e) {
			setTimeout(() => {
				if (this.count > 0) {
					this.count--;
					this.countdown();
				} else {
					this.agree = true;
				}
			}, 1000);
		},
		selectShow(e) {
			if (this.disabled) {
				return false;
			}
			this[e] = true;
		},
		treeConfirm(e, type) {
			if (!e || e.length == 0) {
				this[type + 'Show'] = false;
				this[type + 'Name'] = '';
				this[type + 'Ids'] = [];
				return false;
			}

			this[type + 'Ids'] = [];
			if (e.length > 0) {
				if (type == 'db') {
					this[type + 'Ids'].push(e[0].userId);
					this[type + 'Name'] = e[0].userName;
				} else {
					this[type + 'Ids'].push(e[0].id);
					this[type + 'Name'] = e[0].stationName;
				}
			}
			this[type + 'Show'] = false;
		},
		treeCancel(e, type) {
			this[type + 'Show'] = false;
		},
		checkboxGroupChange(e) {
			this.reflectUserIdentity = e;
			this.form.reflectUserIdentity = e.join(',');
		},
		typeConfirm(e) {
			this.type = e[0].label;
			this.form.type = e[0].value;
			this.form.opinionType = e[0].value;
		},
		typeGroupChange(e) {
			this.type = e;
			this.form.type = e;
			this.form.opinionType = e;
		},
		loadDict(type, list, value) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this[list] = [];
				res.data.forEach((item) => {
					this[list].push({
						value: item.dictValue,
						name: item.dictValue,
						label: item.dictName
					});
				});
			});
		},
		chooseLocation(e) {
			uni.getLocation({
				type: 'gcj02',
				success: (result) => {
					uni.chooseLocation({
						longitude: result.longitude,
						latitude: result.latitude, //纬度
						success: (res) => {
							this.form.address = res.address;
						},
						fail(e) {
							console.log("eee",e)
						}
					});
				},
				fail(e) {
					console.log("eee",e)
				}
			});
		},
		siteTo(e) {
			if (this.llzIds.length == 0) {
				this.$msg('请选择联络站');
				return false;
			}
			uni.navigateTo({
				url: '/pagesB/will/app?id=' + this.llzIds[0] + '&name=' + this.llzName
			});
		},
		navTo(e) {
			uni.navigateTo({
				url: e
			});
		},
		back(e) {
			uni.navigateBack({});
		},
		confirm() {
			this.$refs.uForm.validate((valid) => {
				if (!valid) {
					console.log('验证失败');
					return false;
				} else {
					this.form.clientCode = this.clientCode;
					this.form.createBy = this.userId;
					// this.form.representiveId = this.userId;

					// if (!this.option.representiveId) {
					// 	this.$msg('请选择代表');
					// 	return false;
					// }

					if (this.phone != this.form.phone) {
						if (!this.form.smsCode) {
							this.$msg('请输入验证码');
							return false;
						}
						this.$request('/sms/checkCode', {
							tel: this.form.phone,
							smsCode: this.form.smsCode
						}).then((res) => {
							uni.setStorageSync('phone', this.form.phone);
							this.sendContent();
						});
					} else {
						this.sendContent();
					}
				}
			});
		},
		sendContent() {
			let data = {};
			data = {
				...this.form,
				address: this.form.address + this.form.address2,
				representiveId: this.form.representiveId,
				stationId: this.form.stationId,
				fileList: this.fileList
			};
			
			if (!data.address) {
				this.$msg('请选择发生地点');
				return false;
			}

			let url = '/minqingzhitong/msPublicOpinion/save';
			this.$request(url, data, {
				load: true
			}).then((res) => {
				this.$msg(res.msg);
				setTimeout(() => {
					uni.navigateBack();
				}, 500);
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.popup-box {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	padding: 30rpx;
	background-color: #fff;

	.h2 {
		margin-bottom: 26rpx;
		font-size: 18px;
		font-weight: 600;
		color: #333;
		line-height: 48rpx;
		text-align: center;
	}

	.summon {
		white-space: pre-wrap;
		font-size: 17px;
		line-height: 54rpx;

		.p {
			margin-bottom: 1em;
		}
	}
}

.popup-flex {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.m-box {
	flex-wrap: nowrap;
	flex: 1;
	height: 0;
}

.node {
	margin: 20rpx 0 0 20rpx;
	font-size: 14px;
	color: #9b9b9b;
	line-height: 120rpx;
}

.form-box {
	.p-text {
		padding: 30rpx;
		font-size: 17px;
		font-weight: 500;
		color: #d0021b;
		line-height: 48rpx;
		background-color: #f6f7fb;
	}

	.form-item {
		@include mp-flex;
		border-bottom: 20rpx solid #f5f7fa;

		&.border-none {
			border-bottom: 0;
		}
	}

	.code {
		margin-left: 20rpx;
		color: #d0021b;
	}

	.input-text {
		width: 100%;
		padding: 11rpx 0;
		line-height: 48rpx;
		text-align: right;
	}

	.form-right {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		text-align: right;

		.image {
			margin-left: 20rpx;
			width: 70rpx;
			height: 70rpx;
		}
	}

	.form-checkbox {
		// padding: 8rpx 0;
		margin: -8rpx 0;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
